$(function () {
  var layer = layui.layer;
  var form = layui.form;

  linklist();
  // 1.获取友情链接列表
  function linklist() {
    $.ajax({
      method: "get",
      url: "/admin/links",
      success(res) {
        // console.log(res);
        if (res.status !== 0) {
          return layer.msg("获取列表失败", {
            icon: 5,
          });
        }
        // 渲染数据到页面
        var htmlStr = template("links_tpl", res);
        $("tbody").html(htmlStr);
      },
    });
  }

  // 2.点击添加链接 显示模板
  var indexAdd;
  $("#add-link").on("click", function () {
    indexAdd = layer.open({
      type: 1,
      title: "添加友情链接",
      area: ["500px", "330px"],
      content: $("#add-form-tpl").html(),
    });
  });

  // 3.点击上传图片，弹出文件选择框
  $("body").on("click", "#urlIcon", function () {
    $("#linkFile").click();
  });

  var file = "";
  // 获取上传的图片
  $("body").on("change", "#linkFile", function () {
    // 获取文件列表
    var files = this.files;
    file = files[0];
    var dataUrl = URL.createObjectURL(files[0]);
    // 预览
    $("#preIcon").prop("src", dataUrl);
    // console.log(dataUrl);
  });

  // 4.添加链接,注册事件
  $("body").on("submit", "#add-form", function (e) {
    e.preventDefault();
    // 收集数据
    var fd = new FormData(this);
    $.ajax({
      method: "post",
      url: "/admin/links",
      data: fd,
      contentType: false,
      processData: false,
      Authorization: localStorage.getItem("token"),
      success(res) {
        console.log(res);
        if (res.status !== 0) {
          return layer.msg(res.message, {
            icon: 5,
          });
        }
        layer.msg(res.message, {
          icon: 6,
        });
        linklist();
        layer.close(indexAdd);
      },
    });
  });

  // 5.删除友情链接
  $("body").on("click", ".delete", function () {
    var id = $(this).attr("data-id");
    layer.confirm(
      "您确定要删除?",
      {
        icon: 3,
        title: "提示",
      },
      function (index) {
        $.ajax({
          method: "delete",
          url: "/admin/links/" + id,
          success(res) {
            if (res.status !== 0) {
              return layer.msg(res.message, {
                icon: 5,
              });
            }
            layer.msg(res.message, {
              icon: 6,
            });
            linklist();
          },
        });
      }
    );
  });

  // 6.编辑友情链接
  // 单击“编辑”按钮，弹出模态框
  var linkEdit;
  var id = "";
  $("body").on("click", ".edit", function () {
    linkEdit = layer.open({
      type: 1,
      title: "编辑友情链接",
      area: ["500px", "330px"],
      content: $("#edit-form-tpl").html(),
    });
    // 获取表单信息，并进行渲染
    id = $(this).attr("data-id");
    console.log(id);
    $.ajax({
      method: "get",
      url: "/admin/links/" + id,
      success(res) {
        console.log(res);
        if (res.status !== 0) {
          return layer.msg(res.message, {
            icon: 5,
          });
        }
        form.val("editForm", res.data);
        $("#preIcon").prop(
          "src",
          "http://localhost:8888/uploads/" + res.data.linkicon
        );
      },
    });
  });

  // 修改友情链接
  $("body").on("submit", "#edit-form", function (e) {
    e.preventDefault();
    var fd = new FormData(this);
    fd.append("linkicon", file);
    $.ajax({
      method: "put",
      url: "/admin/links/" + id,
      data: fd,
      contentType: false,
      processData: false,
      success(res) {
        if (res.status !== 0) {
          return layer.msg(res.message, {
            icon: 5,
          });
        }
        layer.msg(res.message, {
          icon: 6,
        });
        linklist();
        layer.close(linkEdit);
      },
    });
  });
});
